<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>contract_template</title>
    <link rel="stylesheet" href="../../../static/layer/css/layui.css" media="all"/>
    <link rel="stylesheet" href="../../../static/css/font-awesome.min.css" media="all">
    <style>
        .layui-form-switch {
            width: 54px;
            margin-top: 0;
        }
        .layui-form-switch i{
            top: 2px;
        }
    </style>
</head>

<body>
<div style="padding: 20px; position: relative;">
    <div class="operateTable">
        名称：
        <div class="layui-inline">
            <input class="layui-input" name="id" id="filter-id" placeholder="请输入关键字" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
    </div>
    <div class="operateTable" style="position: absolute; top: 20px; right: 20px;">
        <button class="layui-btn AUTH-HTMB_XZ" data-type="addTemplate"><i class="layui-icon"></i> 新增模板</button>
    </div>
    <script type="text/html" id="typeTpl">
        {{#  if(d.TEMPLATE_TYPE == 0){ }}
        <div>合同模板</div>
        {{#  } else if(d.TEMPLATE_TYPE == 1) { }}
        <div>凭证模板</div>
        {{#  } }}
    </script>

    <table class="layui-table" lay-data="{height:'full-80', url:'/template/json/', page:true, limit:20, id:'templateTable'}"
           lay-filter="template">
        <thead>
        <tr>
            <!--<th lay-data="{checkbox:true, fixed: true}"></th>-->
            <th lay-data="{field:'ROWNUM', fixed: true}"></th>
            <th lay-data="{field:'TEMPLATE_NAME', width:200}">模板名称</th>
            <th lay-data="{field:'TEMPLATE_TYPE', width:200, align:'center', templet: '#typeTpl'}">模板类型</th>
            <th lay-data="{field:'TEMPLATE_REMARK', width:300}">模板备注</th>
            <th lay-data="{field:'CREATE_NAME', width:200}">创建人</th>
            <th lay-data="{field:'CREATE_TIME', width:250, align:'center'}">创建时间</th>
            <th lay-data="{fixed: 'right', width:250, align:'center', toolbar: '#barDemo'}">操作</th>
        </tr>
        </thead>
    </table>

    <div id="barDemo" style="display: none">
        <a class="layui-btn layui-btn-primary layui-btn-mini AUTH-HTMB_CK" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-mini AUTH-HTMB_BJ" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-mini AUTH-HTMB_SC" lay-event="del">删除</a>
    </div>
</div>

<script type="text/javascript" src="../../../static/layer/layui.js"></script>
<script>
    var table;
    layui.use(['jquery', 'table', 'form', 'layer'], function () {
        table = layui.table;

        //监听工具条
        table.on('tool(template)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.open({
                    type: 2,
                    title: data.TEMPLATE_NAME,
                    shadeClose: false,
                    shade: [0.3],
                    maxmin: true, //开启最大化最小化按钮
                    area: ['900px', '90%'],
                    scrollbar: false, //屏蔽滚动条
                    content: 'template_operate.html?type=view&id=' + data.ID
                });
            } else if (obj.event === 'del') {
                layer.confirm('确认删除 '+data.TEMPLATE_NAME+' 吗', {offset: '150px'}, function (index) {
//                    obj.del();
                    layer.close(index);
                    $.ajax({
                        url: "/template/edit",
                        data: {ID: data.ID, IS_DELETED: 1},
                        dataType: "json",
                        type: "post",
                        async: false,
                        success: function (res) {
                            if (res.errcode === "0"){
                                reload();    // 表格刷新
                                layer.msg(data.TEMPLATE_NAME + " 已删除", {offset: '150px'});   // 弹出删除成功
                            } else if (res.errcode === "1"){
                                layer.msg(res.errmsg, function(){});
                            }
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            console.error(XMLHttpRequest.status);
                            console.error(XMLHttpRequest.readyState);
                            console.error(textStatus);
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                layer.open({
                    type: 2,
                    title: "编辑 " + data.TEMPLATE_NAME,
                    shadeClose: false,
                    shade: [0.3],
                    maxmin: true, //开启最大化最小化按钮
                    area: ['900px', '90%'],
                    scrollbar: false, //屏蔽滚动条
                    content: 'template_operate.html?type=edit&id=' + data.ID
                });
            }
        });

        var $ = layui.$, active = {
            reload: function () {
                var name = $('#filter-id').val();
                table.reload('templateTable', {
                    where: {
                        TEMPLATE_NAME: name
                    }
                });
            }
            , addTemplate: function () {
                layer.open({
                    type: 2,
                    title: '新增模板',
                    shadeClose: false,
                    shade: [0.3],
                    maxmin: true, //开启最大化最小化按钮
                    area: ['900px', '90%'],
                    scrollbar: false, //屏蔽滚动条
                    content: 'template_operate.html?type=add'
                });
            }
        };

        $('.operateTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });

    function reload() {
        table.reload('templateTable', {});
    }
</script>
<script type="text/javascript" src="../../../static/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../../../static/js/common/authUtils.js"></script>
</body>

</html>